<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name='keywords' content='云竹众包'>
    <meta name='description' content='云竹众包'>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <title>云竹众包-test</title>

    <link rel="stylesheet" href="/yunzhuVue/build/css/base.css">
    <link rel="stylesheet" href="/yunzhuVue/build/css/int.css">
    <link rel="stylesheet" href="/yunzhuVue/build/css/hire.css">
    <link rel="stylesheet" href="/yunzhuVue/plugin/Swiper-master/dist/css/animate.min.css">
    <link rel="stylesheet" href="/yunzhuVue/plugin/Swiper-master/dist/css/swiper.min.css">

</head>
<body>

<!-- slider -->
<section id="slider">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide page-full">
                <div class="slider-body">
                    <div class="container">
                        <div class="slider-ct clearfix">
                            <div class="slider-intro ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s">
                                <h1>苦心获得的技能只做一份工作？</h1>
                                <p>你的专业技能应该获得更多回报</p>
                                <p>免费注册云竹众包成为自由工作者</p>
                            </div>
                            <a href="javascript:;" class="slider-btn ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">我要注册</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="swiper-slide page-full">
                <div class="slider-body">
                    <div class="container">
                        <div class="slider-ct clearfix">
                            <div class="slider-intro ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s">
                                <h1>苦心获得的技能只做一份工作？</h1>
                                <p>你的专业技能应该获得更多回报</p>
                                <p>免费注册云竹众包成为自由工作者</p>
                            </div>
                            <a href="javascript:;" class="slider-btn ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">我要注册</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="swiper-slide page-full">
                <div class="slider-body">
                    <div class="container">
                        <div class="slider-ct clearfix">
                            <div class="slider-intro ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s">
                                <h1>苦心获得的技能只做一份工作？</h1>
                                <p>你的专业技能应该获得更多回报</p>
                                <p>免费注册云竹众包成为自由工作者</p>
                            </div>
                            <a href="javascript:;" class="slider-btn ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">我要注册</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="swiper-pagination"></div>
    </div>
</section>

<!-- slt-menu -->
<section id="slt-menu">
    <div class="container">
        <div class="slt-mn-parent clearfix">
            <a href="javascript:;" class="slt-mn-pt-btn slt-mn-pt-btn-actv">企业财务</a>
            <a href="javascript:;" class="slt-mn-pt-btn">企业财务</a>
            <a href="javascript:;" class="slt-mn-pt-btn">企业财务</a>
            <a href="javascript:;" class="slt-mn-pt-btn">企业财务</a>
            <a href="javascript:;" class="slt-mn-pt-btn">企业财务</a>
        </div>

        <div class="slt-mn-child">
            <div class="classify">
                <label>更多分类:</label>
                <div class="clfy-detail">
                    <a href="javascript:;" class="clfy-detail-actv">全部</a>
                    <a href="javascript:;">二级分类菜单</a>
                    <a href="javascript:;">分类二级</a>
                    <a href="javascript:;">二级分类菜单</a>
                    <a href="javascript:;">分类二级</a>
                    <a href="javascript:;">二级分类菜单</a>
                    <a href="javascript:;">分类二级</a>
                    <a href="javascript:;">二级分类菜单</a>
                </div>
            </div>

            <div class="classify">
                <label>服务方类型:</label>
                <div class="clfy-detail">
                    <a href="javascript:;" class="clfy-detail-actv">全部</a>
                    <a href="javascript:;">二级分类菜单</a>
                    <a href="javascript:;">分类二级</a>
                    <a href="javascript:;">二级分类菜单</a>
                    <a href="javascript:;">分类二级</a>
                    <a href="javascript:;">二级分类菜单</a>
                    <a href="javascript:;">分类二级</a>
                    <a href="javascript:;">二级分类菜单</a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 面包屑 -->
<section id="crumb">
    <div class="container">
        <div class="crumb-body clearfix">
            <div class="crumb-slt">
                <a href="javascript:;">综合</a>
                <a href="javascript:;">成功率</a>
                <a href="javascript:;">
                    <span>发布时间</span>
                    <img src="/yunzhuVue/image/task/sort.svg" alt="img">
                </a>
                <a href="javascript:;">
                    <span>报名人数</span>
                    <img src="/yunzhuVue/image/task/sort.svg" alt="img">
                </a>
            </div>

            <div class="crumb-city">
                <div id="target">
                    <select id="city"></select>
                    <select id="local"></select>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 企业服务列表 -->
<section id="self-service">
    <div class="container">

        <!-- 看板开始 -->
        <div class="clearfix">
            <div class="service-com">
                <!-- hover显示内容 -->
                <div class="service-detail">
                    <!-- 评分 -->
                    <div class="service-detail-body">
                        <div class="sv-dt-score">
                            <div class="star-score clearfix">
                                <i></i>
                                <i></i>
                                <i></i>
                                <i></i>
                                <i></i>
                                <strong>4.9</strong>
                            </div>
                            <div class="percent-score">
                                <label><strong>100%</strong>任务成功率</label>
                            </div>
                        </div>

                        <div class="sv-dt-intro">
                            <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
                        </div>

                        <div class="sv-dt-ft">
                            <div class="sv-dt-ft-body clearfix">
                                <label class="keep"><img class="keep-icon" src="/yunzhuVue/image/keep.svg" alt="img">收藏</label>
                                <a href="javascript:;" class="sv-dt-ft-btn">查看档案 ></a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 顶部tag -->
                <div class="service-tag">
                    <p class="self-tag hide">自营服务</p>
                    <p class="company-tag">企业服务</p>
                </div>

                <!-- 头像 -->
                <div class="service-img">
                    <img src="/yunzhuVue/image/hd.png" alt="img">
                </div>

                <!-- 内容 -->
                <div class="service-ct">
                    <h2>用户昵称</h2>
                    <p class="service-intro">头衔介绍如数字服务商</p>
                    <p class="service-local">四川省</p>
                    <div class="intro-tag">
                        <div class="intro-tag-body clearfix">
                            <span>分类类名</span>
                            <span>一级分类类名</span>
                        </div>
                    </div>
                </div>

                <!-- 底部 -->
                <div class="service-foot">
                    <div class="sv-ft-body clearfix">
                        <label class="scs-task">已完成<span class="task-ok">9999</span>个任务</label>
                        <label class="income">收入<span class="income-ok">9999999</span></label>
                    </div>
                </div>
            </div>

            <div class="service-com">
                <!-- hover显示内容 -->
                <div class="service-detail">
                    <!-- 评分 -->
                    <div class="service-detail-body">
                        <div class="sv-dt-score">
                            <div class="star-score clearfix">
                                <i></i>
                                <i></i>
                                <i></i>
                                <i></i>
                                <i></i>
                                <strong>4.9</strong>
                            </div>
                            <div class="percent-score">
                                <label><strong>100%</strong>任务成功率</label>
                            </div>
                        </div>

                        <div class="sv-dt-intro">
                            <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
                        </div>

                        <div class="sv-dt-ft">
                            <div class="sv-dt-ft-body clearfix">
                                <label class="keep"><img class="keep-icon" src="/yunzhuVue/image/keep.svg" alt="img">收藏</label>
                                <a href="javascript:;" class="sv-dt-ft-btn">查看档案 ></a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 顶部tag -->
                <div class="service-tag">
                    <p class="self-tag hide">自营服务</p>
                    <p class="company-tag">企业服务</p>
                </div>

                <!-- 头像 -->
                <div class="service-img">
                    <img src="/yunzhuVue/image/hd.png" alt="img">
                </div>

                <!-- 内容 -->
                <div class="service-ct">
                    <h2>用户昵称</h2>
                    <p class="service-intro">头衔介绍如数字服务商</p>
                    <p class="service-local">四川省</p>
                    <div class="intro-tag">
                        <div class="intro-tag-body clearfix">
                            <span>分类类名</span>
                            <span>一级分类类名</span>
                        </div>
                    </div>
                </div>

                <!-- 底部 -->
                <div class="service-foot">
                    <div class="sv-ft-body clearfix">
                        <label class="scs-task">已完成<span class="task-ok">9999</span>个任务</label>
                        <label class="income">收入<span class="income-ok">9999999</span></label>
                    </div>
                </div>
            </div>
        </div>

        <div id="pagination">

        </div>
    </div>
</section>


<script src="/yunzhuVue/plugin/jquery-3.1.1/jquery-3.1.1.js"></script>
<!--<script src="/yunzhuVue/plugin/Vue/vue.js"></script>-->
<!--<script src="/yunzhuVue/plugin/Vue/vue-router/dist/vue-router.js"></script>-->

<script src="/yunzhuVue/plugin/Swiper-master/dist/js/swiper.min.js"></script>
<script src="/yunzhuVue/plugin/Swiper-master/dist/js/swiper.animate1.0.2.min.js"></script>

<!-- 选择省市 -->
<script src="/yunzhuVue/plugin/distpicker-master/dist/distpicker.js"></script>

<!-- 分页器 -->
<script src="/yunzhuVue/plugin/laypage-v1.3/laypage/laypage.js"></script>

<script>
    // slider
    var swiper = new Swiper('.swiper-container', {
        autoplay: 50000000,//可选选项，自动滑动
        loop : true, // 形成环路
        pagination : '.swiper-pagination',
        paginationClickable :true,
        onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
            swiperAnimateCache(swiper); //隐藏动画元素
            swiperAnimate(swiper); //初始化完成开始动画
        },
        onSlideChangeEnd: function(swiper){
            swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
        }
    });

    //分页器
    laypage({
        cont: $('#pagination'), //容器。值支持id名、原生dom对象，jquery对象,
        pages: 10, //总页数
        skip: true, //是否开启跳页
        skin: '#5CBD30',
        groups: 4 //连续显示分页数
    });

    /**
     *  地区选择器
     */
    // 默认值
    $('#target').distpicker({
        province: '四川省',
        city: '成都市'
    });

    // 获取默认选择地区
    var area = []; // 获取到的数据

    var slt = $('#target select');
    slt.each(function(index, el){
        var md = $(el).attr('selected',true).val();
        area[index] = md;
    });

    // 监听选择框变化
    slt.on('change', function(){
        var theId = $(this).attr('id');
        var md = $(this).attr('selected',true).val();
        if(theId === "city"){
            area[0] = md;
            area[1] = "";
        }else {
            area[1] = md;
        }
    })
</script>
</body>
</html>